<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
    <head th:include="common_include :: commonHead('菜单添加')"/>
    <link href="/libs/iCheck/custom.css" th:href="@{/libs/iCheck/custom.css}" rel="stylesheet"/>
    <body class="gray-bg">
        <div class="wrapper wrapper-content animated fadeInRight">
            <div class="ibox float-e-margins">
                <div class="ibox-content">
                    <form class="form-horizontal m" id="form-menu-add">
                        <input id="pid" name="pid" type="hidden" th:value="${menu.rowKey}"/>
                        <input id="levels" name="levels" type="hidden" th:value="${menu.levels + 1}"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label ">上级菜单</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" id="treeName" readonly="true"
                                       th:value="${menu.menuName}"/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">菜单类型</label>
                            <div class="col-sm-8" th:with="dicts=${@dictCode.selectDictCodeByType('sys_menu_type')}">
                                <div th:each="dict : ${dicts}" th:class="${dict['cssStyle']}">
                                    <input type="radio" th:id="${dict['codeValue']}" name="menuType"
                                           th:value="${dict['codeValue']}"
                                           th:checked="${dict['isDefault'] == 'Y' ? true : false}" />
                                    <label th:for="${dict['codeValue']}" th:text="${dict['codeText']}"></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">菜单名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" name="menuName" id="menuName" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">请求地址</label>
                            <div class="col-sm-8">
                                <input id="url" name="url" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">权限标识</label>
                            <div class="col-sm-8">
                                <input id="permission" name="permission" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">显示排序</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="number" name="sortNumber" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">图标</label>
                            <div class="col-sm-8">
                                <input id="icon" name="icon" class="form-control" type="text" readonly="true"
                                       placeholder="选择图标" />
                                <div class="ms-parent" style="width: 100%;">
                                    <div class="icon-drop animated flipInX"
                                         style="display: none;max-height:200px;overflow-y:auto">
                                        <div data-th-include="upms/menu/icon"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">菜单状态</label>
                            <div class="col-sm-8"
                                 th:with="dicts=${@dictCode.selectDictCodeByType('sys_normal_disable')}">
                                <div th:each="dict : ${dicts}" th:class="${dict['cssStyle']}">
                                    <input type="radio" th:id="${dict['codeValue']}" name="menuStatus" th:value="${dict['codeValue']}"
                                           th:checked="${dict['isDefault'] == 'Y' ? true : false}" />
                                    <label th:for="${dict['codeValue']}" th:text="${dict['codeText']}"></label>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">备注</label>
                            <div class="col-sm-8">
                                <input id="menuRemark" name="menuRemark" class="form-control" type="text" />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">模块名称</label>
                            <div class="col-sm-8">
                                <input class="form-control" type="text" name="moduleName">
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <head th:include="common_include :: commonFoot"/>
        <script th:src="@{/libs/iCheck/icheck.min.js}"></script>
        <script>
            var prefix = ctx + "upms/menu"

            $("#form-menu-add").validate({
                rules: {
                    menuName: {
                        required: true,
                    },
                    url: {
                        required: true,
                    },
                    permission: {
                        required: true,
                    },
                    sortNumber: {
                        required: true,
                        digits:true,
                    },
                },
                submitHandler: function (form) {
                    $.operate.save(prefix + "/add", $('#form-menu-add').serialize());
                }
            });

            function submitClick() {
                if($('#form-menu-add').valid()){
                    $('#form-menu-add').submit()
                }
            }

            $(function () {
                $("input[name='icon']").focus(function () {
                    $(".icon-drop").show();
                });
                $("#form-menu-add").click(function (event) {
                    var obj = event.srcElement || event.target;
                    if (!$(obj).is("input[name='icon']")) {
                        $(".icon-drop").hide();
                    }
                });
                $(".icon-drop").find(".ico-list i").on("click", function () {
                    $('#icon').val($(this).attr('class'));
                });
            });

            /*菜单管理-新增-选择菜单树*/
            function selectMenuTree() {
                var pid = $("#pid").val();
                if (pid != "") {
                    var url = prefix + "/selectMenuTree/" + pid;
                    $.modal.open("选择菜单", url, '380', '380');
                }
                else {
                    var url = prefix + "/selectMenuTree/1";
                    $.modal.open("选择菜单", url, '380', '380');
                }
            }
        </script>
    </body>
</html>
